import * as echarts from "echarts";

// 卡片数据
export const cardData = {
    leftConfig: {
        // 卡片样式
        cardStyle: {
            padding: "10px",
        },
        // 布局配置
        colLayout: {
            xl: 24,
            lg: 24,
            md: 24,
            sm: 24,
            xs: 24
        },
        data: [
            {
                cardId: 1,
                title: "饱和趋势",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress1", // 接口地址
                    style: {
                        height: 220
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "axis",
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            left: '3%',
                            right: '10%',
                            top: "10%",
                            bottom: '5%',
                            containLabel: true
                        },
                        dataset: {
                            dimensions: ["label", "value"],
                            source: [
                                { label: '测试1', value: 1000 },
                                { label: '测试2', value: 888 },
                                { label: '测试3', value: 884 },
                                { label: '测试4', value: 600 },
                                { label: '测试5', value: 500 }
                            ]
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: "inside",
                                endValue: 5,
                                xAxisIndex: [0, 1],  // 注意顺序，0 是主要的 xAxis
                            },
                        ],
                        xAxis: {
                            type: 'category',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: "rgba(6,156,162,0.34)"
                                }
                            },
                            axisTick: {
                                show: false   // 隐藏 x 轴刻度线
                            },
                            axisLabel: {
                                color: '#BCCBCC',
                                fontSize: 10,
                                fontWeight: 400
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false   // y 轴刻度线默认显示，可省略
                            },
                            axisLabel: {
                                color: '#BCCBCC',
                                fontSize: 8,
                                fontWeight: 400
                            },
                            splitLine: {
                                show: true,  // 显示网格线
                                lineStyle: {
                                    color: "rgba(6,156,162,0.34)",  // 你可以调整颜色和透明度
                                    type: "solid"
                                }
                            }
                        },
                        series: [{
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 4,
                            lineStyle: {
                                color: '#21A5E5',
                                width: 1
                            },
                            itemStyle: {
                                color: '#21A5E5'
                            },
                            label: {
                                show: false,
                                position: 'top',
                                color: '#BBD2E9',
                                fontSize: 7,
                            },
                            encode: {
                                x: 'label',
                                y: 'value'
                            }
                        }]
                    }, // 卡片配置
                }
            },
            {
                cardId: 2,
                title: "饱和区域",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 220
                    }, // 卡片主体样式
                    config: {
                        grid: {
                            left: '0%',
                            right: '0%',
                            bottom: '5%',
                            top: '10%',
                            containLabel: true
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: "inside",
                                endValue: 5,
                                xAxisIndex: [0, 1],  // 注意顺序，0 是主要的 xAxis
                            },
                        ],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataset: {
                            dimensions: ['city', 'value'], // 明确字段名和顺序
                            source: [
                                { city: '测试市1', value: 1000 },
                                { city: '测试市2', value: 888 },
                                { city: '测试市3', value: 884 },
                                { city: '测试市4', value: 600 }
                            ]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                show: false, // 隐藏 x 轴刻度线
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(6, 156, 162, 0.34)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 8,
                                fontWeight: 400
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: "rgba(6, 156, 162, 0.34)"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 10,
                                fontWeight: 400
                            }
                        }],
                        series: [
                            {
                                type: 'bar',
                                barWidth: 13,
                                label: {
                                    show: false
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [
                                        { offset: 0, color: "rgba(128, 164, 177, 1)" },
                                        { offset: 1, color: "rgba(128,164,177,0)" }]
                                    ),
                                    borderRadius: [2, 2, 0, 0]
                                },
                                encode: {
                                    x: 'city',    // x 轴映射 city 字段
                                    y: 'value'    // y 轴映射 value 字段
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 3,
                title: "饱和时长排名",
                showSectionCondition: "",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "table", // 类型 echart/table
                    url: "/cardBodyAddressTable1", // 接口地址
                    style: {
                        height: 230
                    }, // 卡片主体样式
                    config: {
                        // 是否显示序号
                        showIndexColumn: true,
                        // 是否显示可选
                        showSelectColumn: false,
                        // 是否显示分页
                        showFooter: false,
                        // 表格数据
                        propsList: [
                            { prop: 'key1', label: '排名', align: 'left', width: "100px" },
                            { prop: 'key2', label: '名称', align: 'left', width: "120px" },
                            { prop: 'key3', label: '饱和时长', align: 'left', width: "120px" }
                        ],
                        // 表格配置项
                        tableAttrConfig: {
                            // 是否显示边框
                            border: true,
                            // 是否显示统计
                            showSummary: false,
                            headerCellStyle: {
                                background: 'rgba(18, 68, 87, 0.54)',
                                color: '#fff',
                                fontFamily: 'PingFang SC',
                                fontSize: '12px',
                                fontStyle: 'normal',
                                fontWeight: '400',
                                borderRadius: "3px",
                                // borderRight: "2px solid #091520",
                                // boxSizing: "border-box"
                            },
                            cellStyle: {
                                fontSize: "12px",
                                color: "#BCCBCC",
                                backgroundColor: 'transparent',
                            }
                        }
                    }, // 卡片配置
                }
            }
        ]
    },
    rightConfig: {
        // 卡片样式
        cardStyle: {
            padding: "10px",
        },
        // 布局配置
        colLayout: {
            span: 24
        },
        data: [
            {
                cardId: 3,
                title: "重点关注地区",
                showSectionCondition: "",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "table", // 类型 echart/table
                    url: "/cardBodyAddressTable1", // 接口地址
                    style: {
                        height: 230
                    }, // 卡片主体样式
                    config: {
                        // 是否显示序号
                        showIndexColumn: true,
                        // 是否显示可选
                        showSelectColumn: false,
                        // 是否显示分页
                        showFooter: false,
                        // 表格数据
                        propsList: [
                            { prop: 'key1', label: '区域名称', align: 'left', width: "100px" },
                            { prop: 'key2', label: '饱和度', align: 'left', width: "120px" },
                            { prop: 'key3', label: '游客数', align: 'left', width: "120px" },
                            { prop: 'key4', label: '操作', align: 'left', width: "120px", slotName: "handleTable" },
                        ],
                        // 表格配置项
                        tableAttrConfig: {
                            // 是否显示边框
                            border: true,
                            // 是否显示统计
                            showSummary: false,
                            headerCellStyle: {
                                background: 'rgba(18, 68, 87, 0.54)',
                                color: '#fff',
                                fontFamily: 'PingFang SC',
                                fontSize: '12px',
                                fontStyle: 'normal',
                                fontWeight: '400',
                                borderRadius: "3px",
                                // borderRight: "2px solid #091520",
                                // boxSizing: "border-box"
                            },
                            cellStyle: {
                                fontSize: "12px",
                                color: "#BCCBCC",
                                backgroundColor: 'transparent',
                            }
                        }
                    }, // 卡片配置
                }
            }
        ]
    }
}